<template>
    <div style="padding: 15px">
      <h2>面单打印结果</h2>
      <vxe-toolbar export>
        <template v-slot:buttons>
          <el-button size="medium" :icon="taskStatus[active].icon" :style="{color: taskStatus[active].color}" type="text">
            {{ taskStatus[active].label }}
          </el-button>
        </template>
      </vxe-toolbar>
      <vxe-table
        border
        maxHeight="800"
        align="center"
        :data="tableData"
      >
          <vxe-table-column type="seq" title="序号" width="100" />
          <vxe-table-column field="taskID" title="任务标识" :formatter="({ cellValue })=> cellValue.split('_')[0]" />
          <vxe-table-column field="orderNum" title="打印顺序" />
          <vxe-table-column field="taskID" title="发货单号" :formatter="({ cellValue })=> cellValue.split('_')[1]" />
          <vxe-table-column field="waybillCode" title="面单号" />
          <vxe-table-column field="taskStatus" title="任务状态" />
          <vxe-table-column field="msg" title="任务消息" :formatter="({ row })=> row.msg ? row.msg : JSON.stringify(row.printStatus)" />
          <vxe-table-column field="taskTime" cellType="string" title="任务执行完时间" />
      </vxe-table>
    </div>
</template>

<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
import PrintWaybill from '@/components/Printing/printWaybill.js'
import { printExpress, printPickOrder } from '@/api/outStorage'
export default {
  name: 'PrintResult',
  data(){
    return {
      // 任务状态
      taskStatus: {
        IN_PROCESS: {
          color: 'orange',
          icon: 'el-icon-loading',
          label: '打印任务执行中，请勿动，否则将会终止打印！'
        },
        COMPLETED: {
          color: 'green',
          icon: 'el-icon-sunny',
          label: '打印任务执行完毕'
        },
        NODATA: {
          color: 'red',
          icon: 'el-icon-lightning',
          label: '当前无打印内容, 请关闭当前页！'
        }
      },
      active: 'IN_PROCESS',
      tableData: []
    }
  },
  created(){
    const { type, listInterface } = this.$route.query
    let printCode = localStorage.getItem('printCode')
    const printData = localStorage.getItem('printData')
    if (!type && !listInterface && printData) {
      // 普通复核、爆品复核 打印
        new PrintWaybill({ printData: JSON.parse(printData) }, (res)=>{
          this.active = 'COMPLETED'
          localStorage.removeItem('printData')
          const str = Math.random().toString(36).substr(2, 10);
          localStorage.setItem(`printComplete${str}`, JSON.stringify(res))
        }, (printResult)=>{
          this.tableData.push(printResult)
        }).initSocket()
      return
    }
    if (!printCode) {
        this.active = 'NODATA'
        this.$confirm('当前无打印内容, 请关闭当前页！', '提示', {
          confirmButtonText: '知道了',
          showCancelButton: false,
          showClose: false,
          closeOnClickModal: false,
          type: 'warning'
        }).then(() => {
            window.opener = null
            window.open("", "_self")
            window.close()
        }).catch(() => {})
      return
    }
    if (type !== 'string') printCode = JSON.parse(printCode)
    const rLoading = this.openLoading({
      text: '打印数据获取中，请勿动！...',
      duration: 'n'
    })
    const requestOperation = {
      'printExpress': printExpress,
      'printPickOrder': printPickOrder
    }
    requestOperation[listInterface](printCode).then(res => {
      if (res.status === 0 && res.data.length > 0) {
        rLoading.close()
        localStorage.removeItem('printCode')
        // new PrintWaybill({ printData: res.data.splice(0, 230) }, ()=>{
        new PrintWaybill({ printData: res.data }, (res)=>{
          this.active = 'COMPLETED'
          const str = Math.random().toString(36).substr(2, 10);
          localStorage.setItem(`printComplete${str}`, JSON.stringify(res))
        }, (printResult)=>{
          this.tableData.push(printResult)
        }).initSocket()
      }
    })
  },
  methods:{
    findList() {
      console.log(this.listQuery)
      const values = Object.values(this.listQuery)
      const searchProps = Object.keys(this.listQuery)
      console.log(values, keys)
      const rest = this.tableData.filter(item => searchProps.some(key => XEUtils.toValueString(item[key]).toLowerCase().indexOf(filterName) > -1))
    },
    refreshTable() {
      return new Promise((resolve) => {
        this.tableData = this.originalData
        setTimeout(() => { resolve() }, 600)
      })
    }
  },
}
</script>
